<template>
	<!-- 布局 -->
	<el-container>
		<!-- 左侧边栏 -->
		<el-aside :style="{ width: isCollapse ? '60px' : '200px' }" style="position: fixed;">
			<el-col>
				<el-menu default-active="home" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen"
					@close="handleClose" unique-opened background-color="#304156" text-color="#A3C4D9"
					active-text-color="#3A9AFF" router style="border-right: none;" @select="handleSelect">
					<el-menu-item v-for="item in menuItems" :key="item.index" :index="item.index" v-if="!item.children">
						<i class="el-icon-price-tag"></i>
						<span slot="title">{{ item.title }}</span>
					</el-menu-item>
					<el-submenu v-for="item in menuItems" :key="item.index" :index="item.index" v-if="item.children">
						<template slot="title">
							<i class="el-icon-price-tag"></i>
							<span>{{ item.title }}</span>
						</template>
						<el-menu-item v-for="child in item.children" :key="child.index" :index="child.index">
							<i class="el-icon-price-tag"></i>
							<span slot="title">{{ child.title }}</span>
						</el-menu-item>
					</el-submenu>
				</el-menu>
			</el-col>
		</el-aside>
		<!-- 右 -->
		<el-container :style="{ marginLeft: isCollapse ? '60px' : '200px' }" style="background-color: #F0F1F7;">
			<!-- 右上 -->
			<el-header>
				<!-- <el-button @click="isFold" :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'" style="background-color: #FFFFFF;"></el-button>
			<el-popconfirm
			  title="确定要退出吗？"
			  @confirm="logOut"
			>
			  <el-button type="warning" slot="reference">退出</el-button>
			</el-popconfirm> -->
				<el-row>
					<!-- 左边的内容，占据23个栅格 -->
					<el-col :span="23">
						<el-button @click="isFold" :icon="isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'"
							style="background-color: #F0F1F7; border: none;"></el-button>

					</el-col>
					<!-- 右边的下拉菜单，也占据12个栅格 -->
					<el-col :span="1">
						<el-dropdown @command="handleCommand">
							<el-avatar :src="require('@/assets/kunkun.png')"></el-avatar>
							<span class="el-dropdown-link">
								<i class="el-icon-arrow-down el-icon--right"></i>
							</span>
							<el-dropdown-menu>
								<el-dropdown-item command='profile'>个人中心</el-dropdown-item>
								<el-dropdown-item command='home'>首页</el-dropdown-item>
								<el-dropdown-item command="proAddress">项目地址</el-dropdown-item>
								<el-dropdown-item command='Docs'>Docs</el-dropdown-item>
								<el-dropdown-item command="out">退出登录</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</el-col>
				</el-row>

			</el-header>

			<!-- 右下 主体内容 -->
			<el-main>
				<el-tabs v-model="activeTabName" type="border-card" @tab-remove="handleTabRemove"
					@tab-click="handleTabClick">
					<el-tab-pane v-for="(tab, index) in editableTabs" :key="tab.name" :label="tab.title"
						:name="tab.name" closable>

					</el-tab-pane>
					<router-view></router-view>
					<!-- 这里通常不需要 {{tab.content}}，因为内容由 <router-view> 渲染 -->
				</el-tabs>
				<!-- <router-view></router-view> -->
			</el-main>
		</el-container>
	</el-container>

</template>

<script>
	export default {
		data() {
			return {
				isCollapse: true,
				//	侧边栏名称和导航
				menuItems: [{
						index: 'home',
						title: '主页'
					},
					{
						index: 'community',
						title: '小区管理'
					},
					{
						index: '2',
						title: '帮买取快递废品回收',
						children: [{
								index: 'shop',
								title: '门店管理'
							},
							{
								index: 'post',
								title: '驿站管理'
							},
							{
								index: 'goods',
								title: '商品管理'
							},
							{
								index: 'orders',
								title: '订单管理'
							},
							{
								index: '2-5',
								title: '废品回收订单'
							},
							// 其他子菜单项...  
						],
					},
					{
						index: '1',
						title: '胖虎甄选',
						children: [{
								index: 'panghugoods',
								title: '商品管理'
							},
							{
								index: '',
								title: '订单管理'
							},
							{
								index: '',
								title: '售后订单'
							},
							// 其他子菜单项...  
						],
					},
					{
						index: '2',
						title: '胖虎家政',
						children: [{
								index: 'housekeeping',
								title: '家政服务'
							},
							{
								index: '',
								title: '订单管理'
							},
							{
								index: '5-3',
								title: '售后订单'
							},
							// 其他子菜单项...  
						],
					},
					{
						index: '',
						title: '用户管理'
					},
					{
						index: '',
						title: '骑手管理'
					},
					{
						index: '',
						title: '新用户红包'
					},
					{
						index: '',
						title: '类目管理'
					},
					// 其他菜单项...  
				],
				//	动态增减标签页
				editableTabs: [{
						title: '主页',
						name: 'home'
					},
					// 初始时可以根据需要添加其他默认标签页  
				],
				activeTabName: 'home', // 当前激活的标签页名称 
			}
		},
		methods: {
			//	动态增减标签页
			handleSelect(index) {
				let selectedItem = this.findMenuItem(index);

				if (!selectedItem) {
					console.error('无法找到菜单项:', index);
					return;
				}

				if (!this.editableTabs.some(tab => tab.name === index)) {
					this.editableTabs.push({
						title: selectedItem.title || '新页面',
						name: index
					});
				}
				this.activeTabName = index;

				const currentRouteName = this.$route.name;
				// 检查是否要导航到的路由与当前路由相同  
				if (index === currentRouteName) {
					// 如果相同，则不执行任何操作或仅执行一些非路由相关的逻辑  
					console.log('Already on the same route:', index);
					// 你可以在这里添加一些额外的逻辑，比如更新页面内的数据等  
					return;
				}
				// // alert(index)
				// this.$router.push({
				// 	name: index
				// });

			},
			handleTabRemove(targetName) {
				// 查找并移除指定的标签页  
				const index = this.editableTabs.findIndex(tab => tab.name === targetName);
				if (index !== -1) {
					// 如果找到了，就移除它  
					this.editableTabs.splice(index, 1);

					// 可能还需要处理激活状态的转移  
					// 例如，如果删除了当前激活的标签页，你可能想要激活另一个标签页  
					if (this.activeTabName === targetName && this.editableTabs.length > 0) {
						// 激活第一个或最后一个或其他标签页作为默认  
						this.activeTabName = this.editableTabs[0].name; // 或者选择其他逻辑  
						// alert(this.activeTabName)
						this.$router.push(this.activeTabName)
					}
				}
			},

			// 递归查找菜单项  
			findMenuItem(index, menu = this.menuItems) {
				for (let item of menu) {
					if (item.index === index) {
						return item;
					}
					if (item.children) {
						let childItem = this.findMenuItem(index, item.children);
						if (childItem) {
							return childItem;
						}
					}
				}
				return null;
			},
			// 处理标签页点击事件  
			handleTabClick(tabName) {

				let index;
				if (typeof tabName === 'string') {

					index = tabName; // 如果 tabName 是字符串，直接使用它  
				} else if (typeof tabName === 'object' && tabName.name) {
					index = tabName.name; // 如果 tabName 是对象且包含 name 属性，则使用 name  
				} else {
					console.error('Invalid tabName:', tabName);
					return;
				}
				this.activeTabName = index
				const currentRouteName = this.$route.name;
				// alert(currentRouteName);
				// 检查是否要导航到的路由与当前路由相同  
				if (index === currentRouteName) {
					// 如果相同，则不执行任何操作或仅执行一些非路由相关的逻辑  
					console.log('Already on the same route:', index);
					// 你可以在这里添加一些额外的逻辑，比如更新页面内的数据等  
					return;
				}

				// 如果不同，则执行导航  
				this.$router.push({
					name: index
				});
			},

			handleOpen(key, keyPath) {
				console.log(key, keyPath);
			},
			handleClose(key, keyPath) {
				console.log(key, keyPath);
			},
			//	头部下拉框控制指令
			handleCommand(command) {
				if (command == 'out') {
					this.logOut()
				} else if (command == 'profile') {
					window.open('https://blog.csdn.net/', '_blank');
				} else if (command == 'home') {
					window.location.href = 'http://localhost:8081/#/home'
				} else if (command == 'proAddress') {
					window.open('https://github.com/PanJiaChen/vue-element-admin/', '_blank');
				} else {
					window.open('https://panjiachen.github.io/vue-element-admin-site/guide/advanced/lazy-loading.html',
						'_blank');
				}
			},
			//	退出登录
			logOut() {
				console.log('xxxx');
				this.$confirm('是否退出?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					//	1.清除sessionStorage中的用户信息
					sessionStorage.clear(); // 或者清除特定的键，如 sessionStorage.removeItem('userInfo');
					//	2.退回到登录页面
					this.$router.push('/login')
					this.$message({
						type: 'success',
						message: '成功退出!'
					});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '取消退出'
					});
				});
			},
			isFold() {
				this.isCollapse = !this.isCollapse
			}
		},
		//	在进入页面挂载时调用加载数据
		// mounted() {
		// 	this.getComm();
		// }

	}
</script>

<style>
	.el-dropdown-link {
		cursor: pointer;
		color: #409EFF;
	}

	.el-icon-arrow-down {
		font-size: 12px;
	}

	.el-menu {
		display: flex;
		flex-direction: column;
	}

	.el-menu-item {
		width: 100%;
	}

	.el-aside {
		/* !impotant : 提高当前的样式的优先级 */
		/* width: 210px !important; */
		background-color: #304156;
		height: 100vh;
	}

	/* 隐藏滚动条 */
	.el-aside::-webkit-scrollbar {
		display: none;
		/* Chrome, Safari, Opera */
	}

	.el-main {
		/* height: 100vh; */
		overflow: hidden;
	}
</style>